<script setup lang="ts">
import { computed, ref } from "vue";
import goodsIcon from "./goodsIcon.vue";
import { isImg } from "@/utils/tools";

const props = defineProps(["goodsData", "myGoodCard","title"]);
const videoUrl = ref({});
//console.log("props: ", JSON.parse(JSON.stringify(props)));
// const deliveryFilter= (delivery:any)=>{
//     console.log(delivery)
//     if(delivery===0){
//         return '包邮'
//     }
// }
const deliveryFilter = computed(() => {
  return (delivery: any) => {
    if (delivery === 0) {
      return "包邮";
    } else if (delivery === 1) {
      return "不包邮";
    } else {
      return "自取";
    }
  };
});

const onLoadedMetadata = () => {
  const video = uni
    .createSelectorQuery()
    .select(`#video-${props.goodsData.id}`);
  //console.log("video", video);
  const canvas = uni
    .createSelectorQuery()
    .select(`#canvas-${props.goodsData.id}`);

  // 获取视频和canvas的上下文
  video.context((res) => {
    const videoContext = res.context;

    // 获取canvas的上下文
    canvas.context((res) => {
      const canvasContext = res.context;

      // 设置canvas大小与视频一致
      canvasContext.drawImage(
        videoContext,
        0,
        0,
        videoContext.width,
        videoContext.height
      );

      // 将canvas转换为图片
      uni.canvasToTempFilePath({
        canvasId: `canvas-${props.goodsData.id}`,
        success: (res) => {
          videoUrl.value[props.goodsData.id] = res.tempFilePath; // 这里得到的是图片文件的临时路径
          //console.log("videoUrl: ", videoUrl);
          // 如果需要，你也可以将图片转换为Base64格式
          // uni.getFileInfo({
          //   filePath: res.tempFilePath,
          //   success: (fileInfo) => {
          //     const reader = new FileReader();
          //     reader.readAsDataURL(fileInfo.file);
          //     reader.onload = (e) => {
          //       this.firstFrame = e.target.result; // Base64格式的图片数据
          //     };
          //   }
          // });
        },
      });
    });
  });
};
const getImgUrl = () => {
  if (props.goodsData?.videos?.[0]) {
    return (
      props.goodsData?.videos?.[0] + "?x-oss-process=video/snapshot,t_0,f_jpg"
    );
  }

  return props.goodsData?.images[0];
};
</script>
<template>
  <view class="flex flex-column l-card">
    <view v-if="myGoodCard === true">
      <!-- 在售中 -->
      <goodsIcon
        class="goods-icon"
        v-if="goodsData.state == 2 && goodsData.authentication != 1"
        type="primary"
        text=""
      ></goodsIcon>
      <!-- 已售出 -->
      <goodsIcon
        class="goods-icon"
        v-else-if="goodsData.state == 3"
        type="black"
        text=""
      ></goodsIcon>
      <!-- 已下架 -->
      <goodsIcon
        class="goods-icon"
        v-else-if="goodsData.state == 4"
        type="warnning"
        text=""
      ></goodsIcon>
      <!-- 认证 -->
      <goodsIcon
        class="goods-icon"
        v-else-if="goodsData.authentication == 1 && goodsData.state != 3"
        type="renzheng1"
        text=""
      ></goodsIcon>
    </view>
    <view class="product-img">
      <view class="tags" v-if="goodsData.delivery === 0 && goodsData.treasure !== 1">
        {{ deliveryFilter(goodsData.delivery) }}
      </view>
      <!-- <view class="renz" v-if="goodsData.authentication == 1">
        <image src="@/static/images/yirenzheng.png" />
      </view> -->
      <view class="play" v-if="goodsData?.videos?.[0]">
        <image src="@/static/images/playvideo.png" />
      </view>
      <image
        v-if="goodsData?.images != null"
        :src="getImgUrl()"
        mode="widthFix"
      />
      <!-- <image
        v-if="isImg(goodsData?.images?.[0])"
        :src="goodsData?.images?.[0]"
        mode="widthFix"
      />
      <image
        v-else
        :src="
          goodsData?.images?.[0] + '?x-oss-process=video/snapshot,t_0,f_jpg'
        "
        mode="widthFix"
      /> -->
      <!-- ?x-oss-process=video/snapshot,t_0,f_jpg -->
      <!-- <video
        v-if="!isImg(goodsData?.images?.[0])"
        :id="`video-${goodsData.id}`"
        @loadedmetadata="onLoadedMetadata"
      ></video>
      <canvas
        v-if="!isImg(goodsData?.images?.[0])"
        :id="`canvas-${goodsData.id}`"
      ></canvas> -->
    </view>
    <view class="flex flex-column goods-info">
      <view class="goods-intro flex">
        <view>
          <!-- <text class="delivery-method">
            {{
            deliveryFilter(goodsData.delivery)
          }}</text>
          <text class="line-col">|</text> -->
          <text class="goods-desc">{{ goodsData.title }}</text>
        </view>
      </view>
      <view class="goods-price flex flex-align-center" v-if="title !=='珍宝档案'">
        <view class="pay-price">
          <text class="cny">￥</text
          ><text class="price">{{ goodsData.currentPrice }}</text>
        </view>
      </view>
      <view class="user flex flex-align-center">
        <image
          :src="
            goodsData.headSculpture === null
              ? '../../static/images/avatar_default.png'
              : goodsData.headSculpture
          "
        />
        <text class="nickname">{{ goodsData.shopName }}</text>
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.goods-icon {
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  bottom: 200rpx;
  right: 25rpx;
  z-index: 999;
}

.l-card {
  padding: 0 0 20rpx 0;
  // border-radius: ;
  // border-radius: 10px 10px 0px 0px;
  // margin-bottom: 27rpx;
  margin: 15rpx 0;
  height: auto;
  position: relative;

  image {
    width: 100%;
    height: 100%;
    border-radius: 10px 10px 0px 0px;
  }
  video {
    width: 165px;
    height: 109.73px;
    // display: none;
  }
  canvas {
    width: 165px;
    height: 109.73px;
  }
}

.goods-info {
  padding: 5rpx 10rpx 0 10rpx;
}

.goods-intro {
  // padding: 5rpx 10rpx 0 10rpx;
  font-size: 24rpx;
  font-weight: bold;

  .delivery-method {
    color: #328cfe;
  }

  .goods-desc {
    color: #4f4f4f;
    font-weight: 900;
  }
}

.goods-price {
  margin-top: 10rpx;
  font-weight: 500;

  .pay-price {
    margin-right: 40rpx;
    font-size: 26rpx;
    color: #f3604e;

    .price {
      font-size: 32rpx;
    }
  }

  .origin-price {
    color: #cecece;
    // font-size: 22rpx;
    font-size: 24rpx;

    text-decoration: line-through;

    .cny {
      font-size: 22rpx;
    }
  }
}

.user {
  margin-top: 10rpx;

  image {
    width: 34rpx;
    height: 34rpx;
    margin-right: 15rpx;
    margin-top: 2px;
    border-radius: 50%;
  }

  .nickname {
    color: #4f4f4f;
    font-size: 24rpx;
    font-weight: 600;
  }
}

.intro {
  font-size: 24rpx;
  font-weight: bold;
}

.line-col {
  padding: 0 5rpx;
  width: 2px;
  color: #cecece;
}
.product-img {
  position: relative;
}
.tags {
  position: absolute;
  left: 0;
  top: 0;
  width: 100rpx;
  height: 40rpx;
  background: #f52121;
  color: #fff;
  font-size: 24rpx;
  text-align: center;
  line-height: 40rpx;
  border-top-left-radius: 16rpx;
  border-bottom-right-radius: 16rpx;
}
.renz {
  position: absolute;
  right: 20rpx;
  bottom: 25rpx;
  width: 88rpx;
  height: 79rpx;
  image {
    width: 100%;
    height: 100%;
  }
}
.play {
  position: absolute;
  left: 20rpx;
  bottom: 27rpx;
  width: 28rpx;
  height: 28rpx;
  image {
    width: 100%;
    height: 100%;
  }
}
</style>
